import { App, Entity, EventModule, Marker2D, getObjectAnchorPoint, sleep } from "vjmap3d";
import { createApp } from "vue";
import CashWindowInfo  from "../components/CashWindowInfo.vue"
import { stationDatas } from "../lib/mock"
// 收费窗口相关方法

let cashWindowMarkerInfo: Marker2D;

/** 创建收费窗口实体 */
export const createCashWindow = (app: App) => {
    let resources = app.getLoadedResources();
    let tollModel = resources.getModel("toll");
    const windowObjects = tollModel.getObjectByName('收费窗口');
    let entities = []
    for(let i = 0; i < windowObjects.children.length; i++) {
        // 关联一个已存在的对象做为实体
        let cashWindowEntity = Entity.attchObject(windowObjects.children[i]);
      
        // 增加事件模块
        cashWindowEntity.add(EventModule, {
            clickHighlight: false,
            hoverSelect: true,
            clickCallback: async (entity: Entity, isClick: boolean) => {
              if (!isClick) {
                cashWindowEntity.outline = false;
                // @ts-ignore
                if (entity && entity.node.name == cashWindowMarkerInfo?.userData?.name) {
                  // 点击了其他的实体，把弹窗隐藏下
                  cashWindowMarkerInfo?.hide()
                }
                return; // 点击了其他实体
              }
              cashWindowEntity.outline = true

              // 显示收费窗口信息详情面板
              showCashMarkerInfo(cashWindowEntity, app)

              let state = app.cameraControl.saveState();//保存当前相机的状态
              // 把物体移动至相机中间
              await app.cameraControl.fitToBox(entity.getBoundingBox(), true, {
                // 上面有信息窗口，需要留点距离，下面的单位为世界坐标的单位
                paddingTop: 5,
                paddingBottom: 2
              })
              // 等1秒
              await sleep(1000);
              // 还原回原来的状态
              await app.cameraControl.loadState(state, true)
            } 
        })
        entities.push(cashWindowEntity);
    }
    return entities;
}

// 收费窗口信息详情面板
const showCashMarkerInfo = (entity: Entity, app: App) => {
  let name = entity.node.name;
  // @ts-ignore
  let stationInfo = stationDatas[name] as Record<string, any>
  let pt = getObjectAnchorPoint(entity.node, 'middle-top')
  if (!cashWindowMarkerInfo) {
    // 创建收费窗口信息详情面板
    let el = document.createElement('div');
    // @ts-ignore
    let vueData = createApp(CashWindowInfo, stationInfo).mount(el)
    cashWindowMarkerInfo = new Marker2D({
      element: el
    })
    // 把vue数据挂到 marker上面，以后可用这个去更改里面的值
    // @ts-ignore
    cashWindowMarkerInfo.userData.vueData = vueData;
    cashWindowMarkerInfo.setPosition(pt)
    cashWindowMarkerInfo.addTo(app)
  } else {
    // 更新坐标和值
    // @ts-ignore
    for(let k in stationInfo) {
      // @ts-ignore
      if (k in cashWindowMarkerInfo.userData.vueData) {
        // @ts-ignore
        cashWindowMarkerInfo.userData.vueData[k] = stationInfo[k]
      }
    }
    cashWindowMarkerInfo.setPosition(pt);
    cashWindowMarkerInfo.show()
  }
  // 当前marker是点击谁弹出的。记录下
  // @ts-ignore
  cashWindowMarkerInfo.userData.name = entity.node.name;
}

export const getcashWindowMarkerInfo = () => {
  return cashWindowMarkerInfo;
}